<script setup lang="ts">
//搜索页
import Combine from "@/components/home/right/combine.vue";
import Related from "@/components/block/home/related.vue";
import Waterfall from "@/components/block/waterfall.vue";

import { dataLocal } from "@/store/store.ts";

import Img from "@/components/block/img.vue";
import SearchNull from "@/assets/search-null.png";

//import SearchShow from "@/components/block/searchShow.vue";

//拿到网址
const site = dataLocal.site.home;

//拿到搜索的词
const searchFont = dataLocal.search.meat.query;
const dataSum = {
  content: {
    ID: 0, //内容唯一ID
    url: "string", //唯一链接
    post_author: "string", //作者
    post_content: "", //内容
    post_date: "0", //时间
    post_excerpt: "", //描述
    post_password: "", //密码
    post_status: "string",
    post_title: "搜索：" + searchFont, //标题
    post_type: "string", //类型
  },
  meat: {
    site: "",
    switch: "false",
  },
};
//搜索信息
const meat = dataLocal.search.meat;
//搜索结果
const Content = dataLocal.search.content;

//设备信息
const device = dataLocal.type.device;
</script>
<template>
  <Combine :data="dataSum">
    <form
      role="search"
      method="get"
      :action="site"
      class="wp-block-search__button-outside wp-block-search__text-button wp-block-search"
    >
      <label class="wp-block-search__label" for="wp-block-search__input-1"
        >搜索</label
      >
      <p></p>
      <div class="wp-block-search__inside-wrapper">
        <input
          class="wp-block-search__input"
          id="wp-block-search__input-1"
          placeholder="请搜索"
          :value="meat.query"
          type="search"
          name="s"
          required
        />
        <button
          aria-label="搜索"
          class="wp-block-search__button wp-element-button"
          type="submit"
        >
          搜索
        </button>
      </div>
    </form>

    <template v-if="Content.length > 0">
      <!--
        <SearchShow :data="Content" />
      -->

      <Related :data="Content" :type="true" v-if="device === 'pc'" />
      <Waterfall :data="Content" v-else />
      <h2>搜索信息</h2>
      <ul>
        <li>搜索结果数量：{{ meat.total_results }}</li>
        <li>当前页码：{{ meat.current_page }}</li>
        <li>总页数：{{ meat.total_pages }}</li>
      </ul>
    </template>
    <div v-else>
      <div class="search-info">
        <Img :img="SearchNull" class="search-null" />
        <p class="search-desc">
          抱歉，没有搜索到与 “{{ searchFont }}” 相关的内容
        </p>
      </div>
    </div>
  </Combine>
</template>
<style scoped lang="less">
.search-info {
  margin: 45px 0;
  .search-null {
    width: 72px;
    height: 72px;
    display: block;
    margin: 0 auto;
  }
  .search-desc {
    color: #333;
    font-size: 24px;
    font-weight: 700;
    margin: 40px auto 0;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.search-desc {
  padding: 2px 0;
}
</style>
